用vue 编写一个日历组件（非常详细

2023-06-05 21:09| 来源: 网络整理| 查看: 265

相信有不少小伙伴和我一样一提到日历就脑壳疼，然后去网上搜索好用的日历组件，如element-ui什么的，但是日历毕竟是别人开发出来的，和自己家ui设计出来的功能样式毕竟不能100%相似，所以这个时候要么就去git上找一个相似的然后去修改代码，要么就只能自己开发一个了，所以我也是把我自己学到的日历组件封装思路分享给大家；

虽然我知道日历组件肯定已经有很多人发过文章，写过思路了，但是我还是想写一下。

准备工作

我是选择弄一个新的脚手架去开发，所以我是去vue-cli官网去拉取一个新的脚手架在本地，相信这个大家应该都会。拉取成功之后npm serve 启动;

image.png

然后我习惯一点用less写css样式，所以我在装一个less和less-loader，然后这个因人而异；

开始 image.png

相信很多小伙伴和我一样看到日历之后不知道怎么下手，如何能区分上下月和当前月呢，其实明白思路和原理之后就很简单。

一个日历有的是42天有的是35天，原因是6行或7行，7行展示的就比较全面；42天的优点是能全部展示出上个月，当前月以及下个月，缺点是上个月和下个月占比较多，有些冗余，如果是35天看起来就会比较精简，但有的月份就不能全部展示出来还是需要42天，这个也无伤大雅，我们就以42天为例；

首先我们需要看当前月的第一天是周几，5月的1号就是周三，那么就用42 - 2(这里注意如果是周日在第一个就是42 - 周几，如果是周一在第一个就是42 - （周几 - 1 )剩下的就是当前月和下个月的日期了。

我创建一个公共js里面放一些公共的方法方便在组件中调用；公共的js我就叫utils.js； getYearMonthDay 就是utils里面的一个公共方法，是为了方便获取年月日； const getYearMonthDay = (date) => { let year = date.getFullYear(); let month = date.getMonth(); let day = date.getDate(); return {year, month, day}; }； computed: { visibleCalendar: function () { let calendatArr = []; 先得到当前的年，月，日 let {year, month, day} = utils.getNewDate(utils.getDate(this.time.year, this.time.month, 1)); 获取当月的第一天得到2019-5-1 let currentFirstDay = utils.getDate(year, month, 1); 获取第一天是星期几得到 3 let weekDay = currentFirstDay.getDay(); 用当月的第一天减去周几前面几天这样就能得到上个月开始的天数（当前月1号是周三，那么周一就是上个月的最后两天） let startTime = currentFirstDay - (weekDay - 1) * 24 * 60 * 60 * 1000; 然后得到所有的日期 for (let i = 0; i < 42; i++) { calendatArr.push({ date: new Date(startTime + i * 24 * 60 * 60 * 1000), year: year, month: month + 1, day: new Date(startTime + i * 24 * 60 * 60 * 1000).getDate() }) }; return calendatArr } }

然后dom结构去v-for这个数组,这样就能得到一个初始的日历了

image.png

但是这样很丑，而且不能区分出哪一天是上个月哪一天是下个月，所以我们需要给上下月去加一下样式来区分当前月和上下月的区分

{{item.day}} notCurrentMonth-class 是区分上下月的类名 currentDay 是判断是否是今天的类名判断是否是当前月的方法，传入每一天用传入的每一天去和当前年月做比较然后返回 isCurrentMonth (date) { let {year: currentYear, month: currentMonth} = utils.getYearMonthDay(utils.getDate(this.time.year, this.time.month, 1)); let {year, month} = utils.getYearMonthDay(date); return currentYear == year && currentMonth == month } 判断是否是当前天的方法同理 isCurrentDay (date) { let {year: currentYear, month: currentMonth, day: currentDay} = utils.getYearMonthDay(new Date()); let {year, month, day} = utils.getYearMonthDay(date); return currentYear == year && currentMonth == month && currentDay == day; }

然后给类名加一些自己喜欢的样式就可以愉快的区分出当前月和上下月以及今天

image.png

现在就差左右切换和点击今天回到当前月了，接下来就很简单，我们先写两个方法用来切换上下月

先去utils里面创建一个新的方法用来获取当前几月几日 const getDate = (year, month, day) => { return new Date(year, month, day); } 在data () { let {year, month, day} = utils.getYearMonthDay(new Date()); return { yearMonth: {year, month, day}, } } // 上一个月获取当年月用setMonth()去设置月份，然后更新yearMonth handlePrevMonth () { let prevMonth = utils.getDate(this.yearMonth.year,this.yearMonth.month,1); prevMonth.setMonth(prevMonth.getMonth() - 1); this.yearMonth = utils.getYearMonthDay(prevMonth); } // 下一个月获取当年月用setMonth()去设置月份，然后更新yearMonth handleNextMonth () { let nextMonth = utils.getDate(this.yearMonth.year,this.yearMonth.month,1); nextMonth.setMonth(nextMonth.getMonth() + 1); this.yearMonth = utils.getYearMonthDay(nextMonth); } // 点击回到今天同理 handleToday () { this.yearMonth = utils.getYearMonthDay(new Date()); }

就这样一个左右切换以及点击回到今天的日历就完成了，是不是非常非常的简单？

gitHub 日历地址欢迎大家

我把详细的代码上传到了我的gitHub上面，在git上面我写的更详细一些，也提供了一些对外的点击事件，这样在组件的外面可以调用里面的一些方法，这样用起来更方便，如果你觉得还不错，可以去git上面给个星星或者是啥的，感谢大家支持，如果有说的不对的地方，欢迎指出，共同探讨！

【本文地址】

公司简介

联系我们